<style>
	dt {
		border: 1px solid #999;
		background: #ddd;
		margin: 2px;
		padding: 2px;
		cursor: pointer;
	}
	hr {
		margin: 10px 0px;
		background: #000;
		border: none;
		height: 3px;
	}
	p {
		margin: 4px 0px;
	}
</style>
<p>The headers below should display their corresponding section when clicked, hiding whichever section is currently visible. The "detach" link below should disable this behavior while the "attach" link should re-enable it. Also note that unlike the other examples on this page, this accordion will initialize without an effect (the first section will instantly be visible).</p>
<dl id="acc1">
  <dl>
    <dt class="toggle"><b>first section</b></dt>
    <dd class="stretcher">I'm the content for the first section.</dd>
    <dt class="toggle"><b>second section</b></dt>
    <dd class="stretcher">I'm the content for the second section.</dd>
    <dt class="toggle"><b>third section</b></dt>
    <dd class="stretcher">I'm the content for the third section.</dd>
  </dl>
</dl>
<a id="detach">detach</a> | <a id="attach">attach</a>

<script src="/depender/build?require=More/Fx.Accordion"></script>

<script>
var acc = new Fx.Accordion($$('#acc1 dt'), $$('#acc1 dd'), {
	initialDisplayFx: false
});
$('detach').addEvent('click', function(){
	acc.detach();
});
$('attach').addEvent('click', function(){
	acc = new Fx.Accordion($$('#acc1 dt'), $$('#acc1 dd'));
});
</script>

<hr/>

<p>This example should behave as above, except the sections will be visible when you mouseover the headers, rather than click.</p>

<dl id="acc2">
  <dl>
    <dt class="toggle"><b>first section</b></dt>
    <dd class="stretcher">I'm the content for the first section.</dd>
    <dt class="toggle"><b>second section</b></dt>
    <dd class="stretcher">I'm the content for the second section.</dd>
    <dt class="toggle"><b>third section</b></dt>
    <dd class="stretcher">I'm the content for the third section.</dd>
  </dl>
</dl>
<script>
new Fx.Accordion($$('#acc2 dt'), $$('#acc2 dd'),{
	trigger: 'mouseenter'
});
</script>

<hr/>

<p>The section below should have a 4th section, added dynamically, which is clickable like the others.</p>

<dl id="acc3">
    <dt class="toggle"><b>first section</b></dt>
    <dd class="stretcher">I'm the content for the first section.</dd>
    <dt class="toggle"><b>second section</b></dt>
    <dd class="stretcher">I'm the content for the second section.</dd>
    <dt class="toggle"><b>third section</b></dt>
    <dd class="stretcher">I'm the content for the third section.</dd>
</dl>
<script>
var acc3 = new Fx.Accordion($$('#acc3 dt'), $$('#acc3 dd'));
var container = $('acc3');
acc3.addSection(
	new Element('dt',{'class': 'toggle', 'html' : '<b>fourth section</b>'}).inject(container),
	new Element('dd',{'class': 'stretcher', 'html' : "I'n the content for the fourth section."}).inject(container)
);
</script>

<hr/>

<p>This example allows you to hide all the sections. You can expose any single section and click its header again to hide it without exposing another one.</p>

<dl id="acc4">
  <dl>
    <dt class="toggle"><b>first section</b></dt>
    <dd class="stretcher">I'm the content for the first section.</dd>
    <dt class="toggle"><b>second section</b></dt>
    <dd class="stretcher">I'm the content for the second section.</dd>
    <dt class="toggle"><b>third section</b></dt>
    <dd class="stretcher">I'm the content for the third section.</dd>
  </dl>
</dl>

<script>
new Fx.Accordion($$('#acc4 dt'), $$('#acc4 dd'),{
	display: -1,
	alwaysHide: true
});
</script>

<hr/>

<p>This section initializes with the second section visible rather than the first.</p>

<dl id="acc5">
  <dl>
    <dt class="toggle"><b>first section</b></dt>
    <dd class="stretcher">I'm the content for the first section.</dd>
    <dt class="toggle"><b>second section</b></dt>
    <dd class="stretcher">I'm the content for the second section.</dd>
    <dt class="toggle"><b>third section</b></dt>
    <dd class="stretcher">I'm the content for the third section.</dd>
  </dl>
</dl>

<script>
new Fx.Accordion($$('#acc5 dt'), $$('#acc5 dd'), {
	display: 1
});
</script>

<hr/>

<p>It should set the height property to "<strong>auto</strong>" after the Fx. Note that it should do that on initialization too</p>

<dl id="acc6">
  <dl>
    <dt class="toggle"><b>first section</b></dt>
    <dd class="stretcher">I'm the content for the first section.</dd>
    <dt class="toggle"><b>second section</b></dt>
    <dd class="stretcher">I'm the content for the second section.</dd>
    <dt class="toggle"><b>third section</b></dt>
    <dd class="stretcher">I'm the content for the third section.</dd>
  </dl>
</dl>

<script>
new Fx.Accordion($$('#acc6 dt'), $$('#acc6 dd'), {
	initialDisplayFx: false,
	display: 2,
	resetHeight: true
});
</script>

